<template>
  <div id="table">

    
    <el-card>
      <div>
        <el-row :gutter="20">
          <el-col :span="3">
            <el-button type="primary" icon="el-icon-refresh"  round>刷新</el-button>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" icon="el-icon-edit"  round>一键上报</el-button>
          </el-col>
        </el-row>
        <el-table :data="tableData" border style="width: 100%; margin-top:20px">
          <el-table-column prop="no" label="序号"></el-table-column>
          <el-table-column prop="tableStatus" label="餐台状态"></el-table-column>
          <el-table-column prop="tableNo" label="餐台号码"></el-table-column>
          <el-table-column prop="tableIp" label="餐台IP"></el-table-column>
          <el-table-column prop="orderNo" label="当前订单序号"></el-table-column>
          <el-table-column prop="tableAmount" label="餐台当前消费"></el-table-column>
          <el-table-column prop="time" label="状态刷新时间"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="open = true">编辑</el-button>
              <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
              <el-dialog title="修改餐台" :visible.sync="open">
          <el-form class="newTableForm" label-width="50px" :model="newTableForm">
        <el-form-item label="状态">
          <el-input v-model="newTableForm.tableStatus"></el-input>
        </el-form-item>
        <el-form-item label="号码">
          <el-input v-model="newTableForm.tableNo"></el-input>
        </el-form-item>
                <el-form-item label="消费">
          <el-input v-model="newTableForm.tableAmount"></el-input>
        </el-form-item>
        <el-form-item label="Ip">
          <el-input v-model="newTableForm.tableIp"></el-input>
        </el-form-item>
      </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="opene = false">取 消</el-button>
          <el-button type="primary" @click="open = false">确 定</el-button>
        </div>
      </el-dialog>


      </div>

      
    </el-card>
    
  </div>
</template>
<script>
export default {
  name: "table",
  //组件创建
  created() {},
  mounted() {},
  data() {
    return {
      open:false,
      tableData: [
        // {
        //   no: "001",
        //   tableStatus: "离线",
        //   tableNo: "432",
        //   tableIp: "432",
        //   torderNo: "123",
        //   orderNo: "324",
        //   tableAmount: "432",
        //   time: "2022-1-12",
        // },
                {
          no: "002",
          tableStatus: "在线",
          tableNo: "123",
          tableIp: "1234",
          torderNo: "123",
          orderNo: "34",
          tableAmount: "sd",
          time: "2022-1-12",
        },
                {
          no: "003",
          tableStatus: "在线",
          tableNo: "123",
          tableIp: "124",
          torderNo: "123",
          orderNo: "324",
          tableAmount: "sad",
          time: "2022-1-12",
        },

      ],
        newTableForm: {
        tableStatus: undefined,
        tableNo: undefined,
        tableAmount: undefined,
        tableIp: undefined,
      },
    };
  },
  methods: {
        handleDelete(row) {
      var _this = this;
      this.$confirm(
        '是否确认删除餐桌"' + row.tableNo + '"的信息?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then( function() {
          // var data={"dishId": row.dishId};
          // data:"da="+JSON.stringify([{"name":"zhan"},{"age":"25"}])
          _this.dishId.push(row.dishId);
          console.log(_this.dishId);
          _this.delete.dishId=_this.dishId;
          console.log(_this.delete);
          return deleteDish(_this.delete);
        })
        .then(() => {
          this.dishId =[],
          this.getList();
          this.$message.success("删除成功");
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="less" scoped></style>
